<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="./lib/flexible.js"></script>
    <link rel="stylesheet" href="./lib/vant.css" />
    <link rel="stylesheet/less" href="./style/index.less" />
    <script src="./lib/less.min.js"></script>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vant.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/base64.min.js"></script>
    <script ignore src="./js/env.js"></script>
    <script ignore src="./js/utils.js"></script>
    <!-- uni 的 SDK，必须引用。 -->
    <script
      type="text/javascript"
      src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
    ></script>
    <title>一梁一码溯源管理</title>
  </head>

  <body>
    <div id="app">
      <div class="home-flowPath-container">
        <!-- 头部组件 -->
        <div
          v-if="userData.client == 'App'"
          class="nav-bar-container"
          :style="{
            paddingTop: (userData.client == 'App' ? userData.statusBarHeight || 20 : 0) + 'px',   
            background: '#385AF9',
          }"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#385AF9'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                一梁一码溯源管理
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="process-body-container">
          <div class="banner"></div>
          <div class="main">
            <div class="pull-refresh-container">
              <van-pull-refresh
                :value="loading"
                @refresh="onRefresh"
                ref="pull-refresh"
              >
                <div style="height: 100%">
                  <!-- 工程信息 -->
                  <div class="card-container">
                    <div class="header">
                      <div class="title-bg"></div>
                      <div>工程信息</div>
                    </div>
                    <div class="line"></div>
                    <div class="base-info">
                      <div class="item">
                        <div class="name">项目名称：</div>
                        <div class="text">{{baseInfoData.gcxx_xmmc}}</div>
                      </div>
                      <div class="item">
                        <div class="name">建设单位：</div>
                        <div class="text">{{baseInfoData.gcxx_jsdw}}</div>
                      </div>
                      <div class="item">
                        <div class="name">监理单位：</div>
                        <div class="text">{{baseInfoData.gcxx_jldw}}</div>
                      </div>
                      <div class="item">
                        <div class="name">设计单位：</div>
                        <div class="text">{{baseInfoData.gcxx_sjdw}}</div>
                      </div>
                      <div class="item">
                        <div class="name">施工单位：</div>
                        <div class="text">{{baseInfoData.gcxx_sgdw}}</div>
                      </div>
                      <!-- <div class="item">
                        <div class="name">项目负责人：</div>
                        <div class="text">{{baseInfoData.gcxx_xmfzr}}</div>
                      </div> -->
                    </div>
                  </div>
                  <!-- 基本信息 -->
                  <div class="card-container">
                    <div class="header">
                      <div class="title-bg"></div>
                      <div>基本信息</div>
                    </div>
                    <div class="line"></div>
                    <div class="base-info">
                      <div class="item">
                        <div class="name">桥梁名称：</div>
                        <div class="text">{{baseInfoData.jbxx_qlmc}}</div>
                      </div>
                      <div class="item">
                        <div class="name">梁编号：</div>
                        <div class="text">{{baseInfoData.jbxx_lbh}}</div>
                      </div>
                      <div class="item">
                        <div class="name">梁型：</div>
                        <div class="text">{{baseInfoData.jbxx_lx}}</div>
                      </div>
                      <div class="item">
                        <div class="name">生产日期：</div>
                        <div class="text">{{baseInfoData.jbxx_scrq}}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 生产信息 -->
                  <div class="card-container">
                    <div class="header">
                      <div class="title-bg"></div>
                      <div>生产信息</div>
                    </div>
                    <div class="line"></div>
                    <div class="base-info">
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">钢筋加工日期：</div>
                          <div class="text">{{baseInfoData.scxx_gjjgrq}}</div>
                        </div>
                        <div class="item m-b-0">
                          <div class="name">加工人员：</div>
                          <div class="text">{{baseInfoData.scxx_jgry}}</div>
                        </div>
                        <div class="detail-button" @click="gotoDetail('gj')">
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card">
                        <div class="item" v-if="userData.client == 'App'">
                          <div class="name">砼生产时间：</div>
                          <div class="text">{{baseInfoData.scxx_tscrq}}</div>
                        </div>
                        <div class="item">
                          <div class="name">浇筑时间：</div>
                          <div class="text">{{baseInfoData.scxx_jzrq}}</div>
                        </div>
                        <div class="item m-b-0" v-if="userData.client == 'App'">
                          <div class="name">浇筑人员：</div>
                          <div class="text">{{baseInfoData.scxx_jzry}}</div>
                        </div>
                        <div
                          class="detail-button"
                          @click="gotoDetail('bh')"
                          v-if="userData.client == 'App'"
                        >
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">振捣时间：</div>
                          <div class="text">{{baseInfoData.scxx_zdrq}}</div>
                        </div>
                        <div class="item m-b-0">
                          <div class="name">振捣人员：</div>
                          <div class="text">{{baseInfoData.scxx_zdry}}</div>
                        </div>
                        <div class="detail-button" @click="gotoDetail('zd')">
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">蒸养时间：</div>
                          <div class="text">{{baseInfoData.scxx_zyrq}}</div>
                        </div>
                        <div class="item m-b-0">
                          <div class="name">蒸养人员：</div>
                          <div class="text">{{baseInfoData.scxx_zyry}}</div>
                        </div>
                        <div class="detail-button" @click="gotoDetail('zy')">
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">喷淋时间：</div>
                          <div class="text">{{baseInfoData.scxx_plrq}}</div>
                        </div>
                        <div class="item m-b-0">
                          <div class="name">喷淋人员：</div>
                          <div class="text">{{baseInfoData.scxx_plry}}</div>
                        </div>
                        <div class="detail-button" @click="gotoDetail('pl')">
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card">
                        <div class="item">
                          <div class="name">张拉时间：</div>
                          <div class="text">{{baseInfoData.scxx_zlrq}}</div>
                        </div>
                        <div class="item m-b-0" v-if="userData.client == 'App'">
                          <div class="name">张拉人员：</div>
                          <div class="text">{{baseInfoData.scxx_zlry}}</div>
                        </div>
                        <div
                          class="detail-button"
                          @click="gotoDetail('zl')"
                          v-if="userData.client == 'App'"
                        >
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">压浆时间：</div>
                          <div class="text">{{baseInfoData.scxx_yjrq}}</div>
                        </div>
                        <div class="item m-b-0">
                          <div class="name">压浆人员：</div>
                          <div class="text">{{baseInfoData.scxx_yjry}}</div>
                        </div>
                        <div class="detail-button" @click="gotoDetail('yj')">
                          查看详情
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">存梁时间：</div>
                          <div class="text">{{baseInfoData.scxx_clrq}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 验收信息 -->
                  <div class="card-container">
                    <div class="header">
                      <div class="title-bg"></div>
                      <div>验收信息</div>
                    </div>
                    <div class="line"></div>
                    <div class="base-info">
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">钢筋质检人员：</div>
                          <div class="text">{{baseInfoData.ysxx_gjzjry}}</div>
                        </div>
                        <div class="item">
                          <div class="name">钢筋质检时间：</div>
                          <div class="text">{{baseInfoData.ysxx_gjzjrq}}</div>
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">同养试块砼强度：</div>
                          <div class="text">{{baseInfoData.ysxx_tysktqd}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测人员：</div>
                          <div class="text">{{baseInfoData.ysxx_tyjcry}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测时间：</div>
                          <div class="text">{{baseInfoData.ysxx_tyjcrq}}</div>
                        </div>
                      </div>
                      <div class="sub-card" v-if="userData.client == 'App'">
                        <div class="item">
                          <div class="name">回弹检测砼强度：</div>
                          <div class="text">{{baseInfoData.ysxx_hdjctqd}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测人员：</div>
                          <div class="text">{{baseInfoData.ysxx_hdjcry}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测时间：</div>
                          <div class="text">{{baseInfoData.ysxx_hdjcrq}}</div>
                        </div>
                      </div>
                      <div class="sub-card">
                        <div class="item" v-if="userData.client == 'App'">
                          <div class="name">试验检测砼强度（28天）：</div>
                          <div class="text">{{baseInfoData.ysxx_syjctqd}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测人员：</div>
                          <div class="text">{{baseInfoData.ysxx_syjcry}}</div>
                        </div>
                        <div class="item">
                          <div class="name">检测时间：</div>
                          <div class="text">{{baseInfoData.ysxx_syjcrq}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 出梁信息 -->
                  <div class="card-container">
                    <div class="header">
                      <div class="title-bg"></div>
                      <div>出梁信息</div>
                    </div>
                    <div class="line"></div>
                    <div class="base-info">
                      <div class="item">
                        <div class="name">出梁时间：</div>
                        <div class="text">{{baseInfoData.jlxx_clsj}}</div>
                      </div>
                      <div class="item">
                        <div class="name">出梁时间：</div>
                        <div class="text">{{baseInfoData.jlxx_jlsj}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="company">
                    <div>中国葛洲坝集团三峡建设工程有限公司</div>
                    <div>武汉至重庆高速公路武汉至汉川段二标项目经理部</div>
                  </div>
                </div>
                <!-- 触底文案 -->
                <div
                  class="reach-bottom-container"
                  v-if="isReachBottomText && !loading"
                >
                  <van-loading size="24px" v-if="!reachBottomFinished">
                    加载中...
                  </van-loading>
                  <div class="no-more-data" v-else>~没有更多了~</div>
                </div>
              </van-pull-refresh>
            </div>
          </div>
          <div class="h5-operation" v-if="userData.client == 'App'">
            <div
              class="h5-button"
              v-if="baseInfoData.jqButton"
              @click="gotoHandle('chuLiang')"
            >
              出梁
            </div>
            <div
              class="h5-button"
              v-if="baseInfoData.cunliangButton"
              @click="gotoHandle('cunLiang')"
            >
              存梁
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  var app = new Vue({
    el: "#app",
    provide() {
      return {};
    },
    data() {
      return {
        userData: {
          userId: "",
          Tenantcode: "",
          Syssource: "",
          client: "",
          statusBarHeight: 0,
          qrCode: "",
        },
        //是否处于加载中状态
        loading: false,
        //是否显示触底文案
        isReachBottomText: false,
        //【触底】是否加载结束
        reachBottomFinished: false,
        baseInfoData: {},
      };
    },
    mounted() {
      this.getInitData();
      this.$nextTick((_) => {
        this.initOperate();
      });
    },
    methods: {
      onClickBack() {
        uni.navigateBack({
          url: "/pages/personalCenter/index",
        });
      },

      //查看详情
      gotoDetail(type) {
        //跳转到详情页面
        window.location.href = "./pages/detail.html";
        localStorage.setItem("INFO_TYPE", type);
      },

      //查看处理
      gotoHandle(type) {
        //跳转到详情页面
        window.location.href = "./pages/handle.html";
        localStorage.setItem("operate", type);
      },

      getInitData() {
        let {
          uid = "",
          tenantCode = "",
          sysSource = "",
          client = "",
          statusBarHeight = 0,
          qrCode = "",
        } = this.getUrlParams(window.location.href);

        this.userData = {
          userId: uid,
          Tenantcode: tenantCode,
          Syssource: sysSource,
          client,
          statusBarHeight,
          qrCode,
        };
        //调用接口
        this.getUserInfo();
        this.getData();
      },

      //查询用户信息
      getUserInfo() {
        this.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "页面加载中",
        });
        let { userId } = this.userData;
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            url: `${YX_BASE_API_URL}/auth/oauth/tokenRefresh?userId=${userId}`,
            responseType: "json",
            isAuthorization: false,
            data: {},
          })
            .then((res) => {
              let { data } = res;
              //通用数据写入缓存
              localStorage.setItem("ACCESS_TOKEN", data?.data?.access_token);
              localStorage.setItem("LOGIN_DATA", JSON.stringify(data?.data));
              localStorage.setItem("SYSTEM", JSON.stringify(this.userData));
            })
            .catch((_) => {
              this.$toast("身份验证失败，请联系管理员！");
            })
            .finally((_) => {
              this.$toast.clear();
            });
        });
      },

      //查询数据信息
      getData() {
        let { Tenantcode, qrCode, userId } = this.userData;
        return new Promise((resolve, reject) => {
          axios({
            method: "GET",
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/api/getQRDataByQRCode`,
            responseType: "json",
            isAuthorization: false,
            params: {
              qrCode,
              tenantCode: Tenantcode,
              userId,
            },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.baseInfoData = data?.result ?? {};
              localStorage.setItem(
                "ROW_DATA",
                JSON.stringify(this.baseInfoData)
              );
            })
            .catch((_) => {
              this.baseInfoData = {};
              localStorage.setItem(
                "ROW_DATA",
                JSON.stringify(this.baseInfoData)
              );
            })
            .finally((_) => {
              //关闭下拉刷新
              setTimeout(() => {
                this.loading = false;
              }, 500);
            });
        });
      },

      //初始化
      initOperate() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        scrollview.addEventListener(
          "scroll",
          debounce((e) => {
            if (
              Math.ceil(e.target.scrollTop + e.target.clientHeight) >=
              e.target.scrollHeight
            ) {
              //触底
              (!this.reachBottomFinished || !this.isReachBottomText) &&
                this.onReachBottom();
            }
          }, 500),
          true
        );
      },

      clacSize() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        if (scrollview.scrollHeight <= scrollview.clientHeight) {
          this.isReachBottomText = false;
          return false;
        }
        return true;
      },

      //触底加载
      onReachBottom() {},

      //下拉刷新开启
      onRefresh() {
        this.loading = true;
        this.getData();
      },

      getUrlParams(url) {
        // 通过 ? 分割获取后面的参数字符串
        let urlStr = url.split("?")[1];
        // 创建空对象存储参数
        let obj = {};
        // 再通过 & 将每一个参数单独分割出来
        let paramsArr = urlStr.split("&");
        for (let i = 0, len = paramsArr.length; i < len; i++) {
          // 再通过 = 将每一个参数分割为 key:value 的形式
          let arr = paramsArr[i].split("=");
          obj[arr[0]] = arr[1];
        }
        return obj;
      },
    },
    destroyed() {},
  });
</script>
